<template>
  <div class="m-h-container" :class="headerStyle == 'w' ? 'm-h-container-w' : 'm-h-container-t' ">
    <div class="m-h-box">
      <div class="m-h-logo-box">
        <img src="@/assets/img/logo.png" alt>
      </div>
      <div :style="'height:' + menuHeight" :class="['m-h-item-box', {'m-b-active': menuCont}]">
        <router-link
          v-for="(temp, index) in navList"
          :to="temp.href"
          :key="temp.title"
          :class="['m-h-item can-touch', {active: index == nowPage}]"
        >
          <span>{{temp.title}}</span>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {},
  data() {
    return {
      navList: [
        { title: "首页", href: "/" },
        { title: "案例", href: "/example" },
        { title: "服务", href: "/service" },
        { title: "新闻资讯", href: "/news" },
        { title: "合作伙伴", href: "/partner" },
        { title: "关于我们", href: "/about" }
      ],
      menuHeight: "auto",
      menuCont: false,
    };
  },
  computed: {
    headerStyle() {
      return this.$store.state.headerStyle;
    },
    nowPage() {
      return this.$store.state.nowPage;
    }
  },
  created() {
    // 响应式menu 调整宽高
    this.changeMenuHeight();
    // 响应式menu 触摸事件
    this.touchEvent();
  },
  mounted() {
    window.onresize = () => {
      this.changeMenuHeight();
    };
  },
  methods: {
    changeMenuHeight() {
      if (window.innerWidth > 768) {
        this.menuHeight = "auto";
      } else {
        this.menuHeight = +window.innerHeight + "px";
      }
    },
    touchEvent() {
      window.addEventListener("touchstart", e => {
        // 保存初始触摸位置
        this._tsp = e.touches[0].pageX;
      });
      window.addEventListener("touchend", e => {
        this._tep = e.changedTouches[0].pageX;

        if (this._tep - this._tsp > 80) {
          this.openMenu();
        } else if (this._tsp - this._tep > 80) {
          this.closeMenu();
        }
      });
    },
    openMenu() {
      this.menuCont = true;
    },
    closeMenu() {
      this.menuCont = false;
    }
  }
};
</script>

<style lang="less" scoped>
.m-h-container {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
}
.m-h-container-w {
  background: #f7f7f7;
  .m-h-item {
    color: #333;
  }
}
.m-h-container-t {
  background: rgba(0, 0, 0, 0.3);
  .m-h-item {
    color: #fff;
  }
}
.m-h-box {
  height: 60px;
  max-width: @baseW;
  margin: auto;
  .m-h-logo-box {
    display: inline-block;
    height: 100%;
    img {
      height: 100%;
    }
  }
  .m-h-item-box {
    float: right;
    transition: all 0.5s;
    .m-h-item {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      &.active > span {
        padding-bottom: 5px;
        border-bottom: 3px solid #007eff;
      }
    }
  }
}
// 超小屏响应
@media (max-width: 768px) {
  .m-h-container-w {
    background: rgba(0, 0, 0, 0.3);
    .m-h-item {
      color: #fff;
    }
  }
  .m-h-logo-box {
    float: right;
  }
  .m-h-item-box {
    float: none;
    position: fixed;
    top: 0;
    padding: 0 20px;
    margin-right: 30%;
    background-color: #333;
    transform: translateX(-101%);
    transition: all 0.5s;
    .m-h-item {
      width: 100%;
      text-align: center;
      border-bottom: 1px solid #252525;
      color: #fff;
    }
    &.m-b-active {
      transform: translateX(0%);
    }
  }
}
</style>
